<template>
  <div>
      <div style="display: flex;">
        <div id="pieChart" style="width: 50%; height: 400px; margin: 20px;" class="chart"></div>
        <div id="barChart" style="width: 50%; height: 400px;margin: 20px;"  class="chart"></div>
      </div>
      <div id="lineChart" style="width: 100%; height: 400px; align-items: center;" class="chart"></div>
  </div>
  <!-- <div id="pieChart" style="width: 600px; height: 400px;" class="chart"></div> -->
</template>

<script>
import * as echarts from 'echarts';
  
export default {
  name:"third",
  data(){
      return {
        pageBean: {
          pageNum: 1,
          pageSize: 10,
        },
        products:[],
        tenantId:'',
        o1:[],
        airs:[],
        humidities:[],
        o2:[],
        o3:[],
        chartData: [
        10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220, 230, 240, 250, 260, 270, 280, 290, 300, 310, 320, 330
      ],
      }
  },
  mounted() {
      this.getCounts();
      this.getAirTemperNGetAirHumidity();
      this.createBarChart();
      // this.createLineChart();
      
  },
  created() {
      
    this.tenantId = sessionStorage.getItem("tenantId");
    
  },
  methods: {
    getCounts(){
      this.$axios({
        url:`/device/counts/${this.tenantId}`,
        method:"GET"
      }).then(res=>{
          this.products = res.data;
          this.o1 = this.products.map((item) => {
              return {
                value: item.value,
                name: item.name,
              };
            });
          // console.log(this.o1);
          this.createPieChart();
      });
    },
    getAirTemperNGetAirHumidity(){
      this.$axios({
        url:`message/tem/${this.tenantId}`,
        method:"GET"
      }).then(res=>{
        this.airs = res.data;
        // this.o2 = this.airs.map((item) => {
        //     return {
        //       value: item.humidity,
        //       name: item.deviceName,
        //     };
        //   });
        // console.log(this.airs);
        this.$axios({
          url:`message/hum/${this.tenantId}`,
          method:"GET"
        }).then(response=>{
          this.humidities = response.data;
          // this.o3 = this.airs.map((item) => {
          //     return {
          //       value: item.humidity,
          //       name: item.deviceName,
          //     };
          //   });
          // console.log(this.humidities);
          this.createLineChart();
          
        })
      })

    },

    createPieChart() {
      const pieChart= echarts.init(document.getElementById("pieChart"));
      const option1 = {
          title: {
            text: '各产品中的设备分布占比图'
          },
          series: [
          {
              type: 'pie',
              
              data: this.o1
            }
          ]
      };
      pieChart.setOption(option1);
    },
    // data: [
    // { value: 2, name: '智慧猪圈' },
    // { value: 2, name: '郑州智慧大棚' },
    // { value: 1, name: '智慧鱼塘' },
    // { value: 3, name: '智慧家居' },
    // { value: 5, name: '通信网关' },
    // { value: 1, name: '智慧果园' },
    // { value: 1, name: '武汉大棚' },
    // { value: 1, name: '武汉小棚' }
    // ]
    createBarChart() {
      var chartDom = document.getElementById('barChart');
      var barChart = echarts.init(chartDom);
      var option3;

      option3 = {
        title: {
            text: '各设备消息统计'
          },
        xAxis: {
          type: 'category',
          data: ['智能网关', '网关设备', '传感器2', '测试设备7', '照明', '灯', '大棚网关01']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [20, 80, 50, 30, 20, 40, 10],
            type: 'bar'
          }
        ]
      };

      barChart.setOption(option3);
    },
    createLineChart() {
      const lineChart= echarts.init(document.getElementById("lineChart"));
      const option2 = {
        title: {
          text: '消息上下行变化'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          // data: [  '周三', '周四', '周五', '周六', '周日','周一','周二',]
          data: this.chartData
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
          data: this.airs,
          type: 'line',
          smooth: true,
          areaStyle: {}
          },
          {
          data: this.humidities,
          type: 'line',
          smooth: true,
          areaStyle: {}
          }
      ]
      }
      lineChart.setOption(option2);
    }
  }
};
</script>

<style scoped>
.chart-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 80vh;
  padding: 20px;
  background-color: #f4f4f4; /* 设置背景色 */
}

.chart-item {
  flex: 1;
  margin: 20px;
}

.chart {
  width: 100%; /* 设置图表宽度 */
  height: 100%; /* 设置图表高度 */
}

/* CSS样式，可以根据需求进行调整 */
.chart-container {
  background: linear-gradient(135deg, #232526, #414345); /* 使用渐变背景色 */
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
}

.chart {
  border-radius: 10px;
  overflow: hidden;
}
</style>